<template>
  <div>
    <ul class="tabs">
      <li :class="activetab === 0 ? 'active' : ''" @click="changeTab(0)">{{$t('EditTabs_Commandandlogging')}}</li>
      <li :class="activetab === 1 ? 'active' : ''" @click="changeTab(1)">{{$t('EditTabs_Datavolume')}}</li>
      <li :class="activetab === 2 ? 'active' : ''" @click="changeTab(2)">{{$t('EditTabs_network')}}</li>
      <li :class="activetab === 3 ? 'active' : ''" @click="changeTab(3)">{{$t('EditTabs_environmentvariable')}}</li>
      <li :class="activetab === 4 ? 'active' : ''" @click="changeTab(4)">{{$t('EditTabs_label')}}</li>
      <li :class="activetab === 5 ? 'active' : ''" @click="changeTab(5)">{{$t('EditTabs_Restartstrategy')}}</li>
      <li :class="activetab === 6 ? 'active' : ''" @click="changeTab(6)">{{$t('EditTabs_Operationsandresources')}}</li>
      <li :class="activetab === 7 ? 'active' : ''" @click="changeTab(7)">{{$t('EditTabs_function')}}</li>
    </ul>
    <div>
      <TabLogs :item="item" v-show="activetab === 0"></TabLogs>
      <TabVolume :item="item" v-show="activetab === 1"></TabVolume>
      <TabNetwork :item="item" v-show="activetab === 2"></TabNetwork>
      <TabVariable :item="item" v-show="activetab === 3"></TabVariable>
      <TabLable :item="item" v-show="activetab === 4"></TabLable>
      <TabRestart :item="item" v-show="activetab === 5"></TabRestart>
      <TabRam :item="item" v-show="activetab === 6"></TabRam>
      <TabFun :item="item" v-show="activetab === 7"></TabFun>
    </div>
  </div>
</template>

<script>
import TabLogs from '@/components/editContainer/TabLogs'
import TabVolume from '@/components/editContainer/TabVolume'
import TabNetwork from '@/components/editContainer/TabNetwork'
import TabVariable from '@/components/editContainer/TabVariable'
import TabLable from '@/components/editContainer/TabLable'
import TabRestart from '@/components/editContainer/TabRestart'
import TabRam from '@/components/editContainer/TabRam'
import TabFun from '@/components/editContainer/TabFun'

export default {
  data () {
    return {
      activetab: 0
    }
  },
  props: ['item'],
  methods: {
    changeTab (int) {
      this.activetab = int
    }
  },
  components: {
    TabLogs,
    TabVolume,
    TabNetwork,
    TabVariable,
    TabLable,
    TabRestart,
    TabRam,
    TabFun
  }
}
</script>

<style lang="scss" scoped>
.tabs{
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  li{
    flex: 1;
    text-align: center;
    padding: 10px 0px;
    font-size: 16px;
    color:  #067FB5;
    border-radius: 10px;
    cursor: pointer;
  }
  li:hover{
    background: #f3f3f3;
  }
  .active{
    background: #067FB5;
    color: #fff;
  }
}
</style>
